<template>
  <div class="config-overview-container">
    <div class="page-header">
      <h2 class="page-title">配置概览</h2>
      <p class="page-subtitle">查看和管理系统中所有配置模块的状态，快速定位和配置各项服务</p>
    </div>

    <!-- 配置统计 -->
    <div class="config-stats">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="已配置服务"
              :value="configuredCount"
              suffix="个"
              :value-style="{ color: '#52c41a', fontSize: '24px', fontWeight: '600' }"
            >
              <template #prefix>
                <check-circle-outlined style="color: #52c41a;" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="未配置服务"
              :value="unconfiguredCount"
              suffix="个"
              :value-style="{ color: '#ff4d4f', fontSize: '24px', fontWeight: '600' }"
            >
              <template #prefix>
                <exclamation-circle-outlined style="color: #ff4d4f;" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="配置完成率"
              :value="configurationRate"
              :precision="1"
              suffix="%"
              :value-style="{ color: '#1890ff', fontSize: '24px', fontWeight: '600' }"
            >
              <template #prefix>
                <pie-chart-outlined style="color: #1890ff;" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <a-statistic
              title="服务健康度"
              :value="healthScore"
              :precision="1"
              suffix="%"
              :value-style="{ color: healthScore >= 90 ? '#52c41a' : healthScore >= 70 ? '#faad14' : '#ff4d4f', fontSize: '24px', fontWeight: '600' }"
            >
              <template #prefix>
                <heart-outlined :style="{ color: healthScore >= 90 ? '#52c41a' : healthScore >= 70 ? '#faad14' : '#ff4d4f' }" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 第三方服务配置 -->
    <div class="config-section">
      <div class="section-header">
        <h3>第三方服务配置</h3>
        <a-button type="primary" @click="navigateToThirdParty">
          <setting-outlined />
          管理配置
        </a-button>
      </div>

      <a-row :gutter="[16, 16]">
        <a-col :span="6" v-for="service in thirdPartyServices" :key="service.key">
          <a-card
            class="service-card"
            :class="{ 'configured': service.configured }"
            @click="navigateToService(service.key)"
            hoverable
          >
            <div class="service-content">
              <div class="service-icon" :class="service.key">
                <component :is="service.icon" />
              </div>
              <div class="service-info">
                <h4>{{ service.name }}</h4>
                <p>{{ service.description }}</p>
                <div class="service-status">
                  <a-tag :color="service.configured ? 'success' : 'error'">
                    {{ service.configured ? '已配置' : '未配置' }}
                  </a-tag>
                  <span class="last-update" v-if="service.lastUpdate">
                    {{ service.lastUpdate }}
                  </span>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 系统基础配置 -->
    <div class="config-section">
      <div class="section-header">
        <h3>系统基础配置</h3>
        <a-space>
          <a-button @click="navigateToBasic">
            <setting-outlined />
            基本设置
          </a-button>
          <a-button @click="navigateToSecurity">
            <safety-outlined />
            安全设置
          </a-button>
        </a-space>
      </div>

      <a-row :gutter="[16, 16]">
        <a-col :span="6" v-for="setting in systemSettings" :key="setting.key">
          <a-card
            class="service-card"
            :class="{ 'configured': setting.configured }"
            @click="navigateToSystemSetting(setting.key)"
            hoverable
          >
            <div class="service-content">
              <div class="service-icon" :class="setting.key">
                <component :is="setting.icon" />
              </div>
              <div class="service-info">
                <h4>{{ setting.name }}</h4>
                <p>{{ setting.description }}</p>
                <div class="service-status">
                  <a-tag :color="setting.configured ? 'success' : 'warning'">
                    {{ setting.configured ? '已配置' : '待完善' }}
                  </a-tag>
                  <span class="last-update" v-if="setting.lastUpdate">
                    {{ setting.lastUpdate }}
                  </span>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <div class="section-header">
        <h3>快速操作</h3>
      </div>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-card class="action-card" @click="checkAllConfigs" hoverable>
            <div class="action-content">
              <check-circle-outlined class="action-icon" />
              <div class="action-info">
                <h4>检查所有配置</h4>
                <p>验证所有配置项的有效性</p>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card class="action-card" @click="exportConfigs" hoverable>
            <div class="action-content">
              <download-outlined class="action-icon" />
              <div class="action-info">
                <h4>导出配置</h4>
                <p>备份当前系统配置</p>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card class="action-card" @click="importConfigs" hoverable>
            <div class="action-content">
              <upload-outlined class="action-icon" />
              <div class="action-info">
                <h4>导入配置</h4>
                <p>从备份文件恢复配置</p>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  PieChartOutlined,
  HeartOutlined,
  SettingOutlined,
  SafetyOutlined,
  CloudServerOutlined,
  MessageOutlined,
  EnvironmentOutlined,
  ScanOutlined,
  UserOutlined,
  LockOutlined,
  DatabaseOutlined,
  MonitorOutlined,
  DownloadOutlined,
  UploadOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 第三方服务配置状态
const thirdPartyServices = reactive([
  {
    key: 'storage',
    name: '存储配置',
    description: '云存储服务配置',
    icon: CloudServerOutlined,
    configured: false,
    lastUpdate: null
  },
  {
    key: 'sms',
    name: '短信配置',
    description: '短信服务商配置',
    icon: MessageOutlined,
    configured: false,
    lastUpdate: null
  },
  {
    key: 'map',
    name: '地图配置',
    description: '地图服务API配置',
    icon: EnvironmentOutlined,
    configured: false,
    lastUpdate: null
  },
  {
    key: 'ocr',
    name: 'OCR配置',
    description: '文字识别服务配置',
    icon: ScanOutlined,
    configured: false,
    lastUpdate: null
  }
])

// 系统基础配置
const systemSettings = reactive([
  {
    key: 'basic',
    name: '基本设置',
    description: '系统名称、logo等基础信息',
    icon: SettingOutlined,
    configured: false,
    lastUpdate: null
  },
  {
    key: 'security',
    name: '安全设置',
    description: '密码策略、访问控制等',
    icon: SafetyOutlined,
    configured: false,
    lastUpdate: null
  },
  {
    key: 'database',
    name: '数据库配置',
    description: '数据库连接和备份设置',
    icon: DatabaseOutlined,
    configured: false,
    lastUpdate: null
  },
  {
    key: 'monitoring',
    name: '监控配置',
    description: '系统监控和日志配置',
    icon: MonitorOutlined,
    configured: false,
    lastUpdate: null
  }
])

// 计算统计数据
const allServices = computed(() => [...thirdPartyServices, ...systemSettings])

const configuredCount = computed(() => {
  return allServices.value.filter(service => service.configured).length
})

const unconfiguredCount = computed(() => {
  return allServices.value.filter(service => !service.configured).length
})

const configurationRate = computed(() => {
  const total = allServices.value.length
  return total > 0 ? (configuredCount.value / total) * 100 : 0
})

const healthScore = computed(() => {
  // 基于配置完成率和最近更新时间计算健康度
  const baseScore = configurationRate.value
  const recentUpdates = allServices.value.filter(service => {
    if (!service.lastUpdate) return false
    const updatedTime = new Date(service.lastUpdate)
    const monthAgo = new Date()
    monthAgo.setMonth(monthAgo.getMonth() - 1)
    return updatedTime > monthAgo
  }).length

  const updateBonus = (recentUpdates / allServices.value.length) * 10
  return Math.min(100, baseScore + updateBonus)
})

// 导航方法
const navigateToThirdParty = () => {
  router.push('/system-settings/third-party')
}

const navigateToService = (serviceKey: string) => {
  router.push(`/system-settings/third-party/${serviceKey}`)
}

const navigateToBasic = () => {
  router.push('/system-settings/basic')
}

const navigateToSecurity = () => {
  router.push('/system-settings/security')
}

const navigateToSystemSetting = (settingKey: string) => {
  if (settingKey === 'basic' || settingKey === 'security') {
    router.push(`/system-settings/${settingKey}`)
  } else {
    message.info(`${settingKey}配置功能开发中...`)
  }
}

// 快速操作方法
const checkAllConfigs = () => {
  message.loading('正在检查所有配置...', 2)
  setTimeout(() => {
    message.success('配置检查完成')
  }, 2000)
}

const exportConfigs = () => {
  message.success('配置导出功能开发中...')
}

const importConfigs = () => {
  message.success('配置导入功能开发中...')
}
</script>

<style scoped>
.config-overview-container {
  background: #f8fafc;
  min-height: 100vh;
  padding: 24px;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-title {
  margin: 0 0 12px 0;
  font-size: 32px;
  font-weight: 700;
  color: white;
}

.page-subtitle {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.config-stats {
  margin-bottom: 32px;
}

.stat-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: none;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.config-section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8e8e8;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.service-card {
  border-radius: 12px;
  border: 2px solid #e8e8e8;
  transition: all 0.3s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.service-card.configured {
  border-color: #52c41a;
  background: linear-gradient(135deg, #f6ffed 0%, #f0f9e8 100%);
}

.service-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.service-icon.storage {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.service-icon.sms {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}

.service-icon.map {
  background: linear-gradient(135deg, #fa8c16, #d46b08);
}

.service-icon.ocr {
  background: linear-gradient(135deg, #722ed1, #531dab);
}

.service-icon.basic {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.service-icon.security {
  background: linear-gradient(135deg, #f5222d, #cf1322);
}

.service-icon.database {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}

.service-icon.monitoring {
  background: linear-gradient(135deg, #fa8c16, #d46b08);
}

.service-info {
  flex: 1;
}

.service-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.service-info p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.service-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.last-update {
  font-size: 12px;
  color: #9ca3af;
}

.quick-actions {
  margin-top: 40px;
}

.action-card {
  border-radius: 12px;
  border: 2px solid #e8e8e8;
  transition: all 0.3s ease;
  cursor: pointer;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #1890ff;
}

.action-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.action-icon {
  font-size: 32px;
  color: #1890ff;
}

.action-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.action-info p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}
</style>